<script setup lang="ts">
import Search from "@/views/pipe-network/components/Widgets/Search/index.vue";
import Tools from "@/views/pipe-network/components/Widgets/Tool/index.vue";
import Draw from "@/views/pipe-network/components/Widgets/Draw/index.vue";
import SinglePointCheck from "@/views/pipe-network/components/Widgets/SinglePointCheck/index.vue";
import { store, useMapStore } from "@/store";
import { MAP_ACTION } from "@/views/pipe-network/constants";
import { publish } from "@/api/pipe";
import Legend from "@/views/pipe-network/components/Widgets/Legend/index.vue";
import { useLocalStore } from "@/views/pipe-network/store";

defineProps({
  deviceCategoryList: Array<any>,
});
const mapStore = useMapStore();
const { isShowPipeInfoList, mapAction } = storeToRefs(mapStore);
const isShowTools = ref(true);
const isShowLegend = ref(false);
const localStore = useLocalStore();
const openInfoList = () => {
  mapStore.setMapAction("");
  mapStore.setShowPipeInfoListFlag(!isShowPipeInfoList.value);
};
const publishAll = () => {
  publish().then((rst: any) => {
    const { succeeded, errors } = rst;
    if (succeeded) {
      ElMessage({
        message: "发布成功！",
        type: "success",
      });
      localStore.addUpdatePointAPICount();
      localStore.addUpdateLineAPICount();
    } else {
      if (errors && errors.includes('暂无')) {
        ElMessage({
          message: errors,
          type: "warning",
        });
      } else {
        ElMessage({
          message: "发布失败，请联系管理员！",
          type: "error",
        });
      }
    }
  });
};
const toggleShowLegend = () => {
  isShowLegend.value = !isShowLegend.value;
};
</script>

<template>
  <Search />
  <Tools v-if="isShowTools" />
  <Draw />
  <SinglePointCheck v-if="mapAction === MAP_ACTION.SEARCH_SINGLE_POINT" />
  <div class="options">
    <div class="bg-blue" @click="isShowTools = !isShowTools">工具箱</div>
    <div class="bg-blue" @click="openInfoList">元素列表</div>
    <el-popconfirm title="确定发布吗?" @confirm="publishAll">
      <template #reference>
        <div class="bg-green">发布</div>
      </template>
    </el-popconfirm>
  </div>
  <Option @toggle-show-legend="toggleShowLegend" />
  <Legend
    v-if="isShowLegend"
    @toggle-show-legend="toggleShowLegend"
    :deviceCategoryList="deviceCategoryList"
  />
</template>

<style scoped lang="scss">
.options {
  position: absolute;
  top: 27px;
  right: 17px;
  z-index: 1000;
  display: flex;
  color: white;

  div {
    width: 65px;
    height: 65px;
    margin-left: 7px;
    line-height: 65px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
  }

  .bg-blue {
    background: #1990ff 100%;
  }

  .bg-green {
    background: #a2ef4d 100%;
  }
}
</style>
